// import { useState, useEffect } from "react";
import style from "./style.module.scss";
import { Form, Button, Input, Toast } from "antd-mobile";
import { observer } from "mobx-react-lite";
import { NavLink, useNavigate, useLocation } from "react-router-dom";
import { UserStore } from "../../store/user";
const { login_wrap } = style;
const obLogin = ({ user }: { user: UserStore }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const onFinish = async (value: any) => {
    console.log(value);
    let res = await user.setProfile(value);
    console.log(res, "login1");
    if (res?.data.code == 1) {
      //
      Toast.show({
        icon: "success",
        content: res.data.message,
        duration: 2000,
        afterClose: () => {
          navigate("/");
        },
      });
    } else {
      Toast.show({
        icon: "fail",
        content: "用户名或密码错误",
        duration: 2000,
      });
    }
  };

  return (
    <div className={login_wrap}>
      <div>
        <Form
          onFinish={onFinish}
          style={{ width: "80vw" }}
          layout="horizontal"
          footer={
            <Button block type="submit" color="danger">
              登录
            </Button>
          }
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "账户名" }]}
          >
            <Input
              onChange={console.log}
              placeholder="请输入账户名"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input onChange={console.log} placeholder="请输入密码" />
          </Form.Item>
        </Form>
        <p>
          <NavLink to="/register">去注册</NavLink>
        </p>
      </div>
    </div>
  );
};
export default observer(obLogin);
